<!DOCTYPE html>
<html>
  <!--
    Copyright 2010 Google Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
  -->
  <head>
    <title>Android Asset Studio - Icon Generator - Launcher icons</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery.ui.all.css">
    <!-- canvg used to overcome <img src=SVG> toDataURL security issues -->
    <!-- see code.google.com/p/chromium/issues/detail?id=54204 -->
    <script src="lib/canvg/rgbcolor.js"></script> 
    <script src="lib/canvg/canvg.js"></script>

    <link rel="stylesheet" href="lib/colorpicker/css/colorpicker.css">
    <script src="lib/colorpicker/js/colorpicker.js"></script>

    <!-- for .ZIP downloads -->
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script src="lib/downloadify/js/downloadify.min.js"></script>
    <script src="lib/jszip/jszip.js"></script>

    <link rel="stylesheet" href="lib/jquery-ui-1.8.4.android-theme/theme.css">

    <link rel="stylesheet" href="css/studio.css">
    <style>
      .out-image-block {
        min-width: 15em;
      }
    </style>
    <script src="js/asset-studio.pack.js"></script>

    <!-- TODO: remove Analytics tracking if you're building the tools locally! -->
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-18671401-1']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </head>
  <body>
    <div id="main-container">
      <div id="header">
        <h1><a href="index.html">Android Asset Studio</a></h1>
      </div>
      <div id="page-header">
        <div id="breadcrumb">
          <a href="index.html">Android Asset Studio</a> &raquo;
          <a href="index.html#group-icon-generators">Icon generators</a> &raquo;
          <em>Launcher icons</em>
        </div>
        <p id="page-intro">
          The <strong>launcher icon generator</strong> will create icons that you
          can use in your Android application, from a variety of source images.
          To begin, simply enter the input details below. Output will be shown
          below.
        </p>
      </div>
      <div id="inputs">
        <div id="inputs-form"></div>
        <input type="checkbox" id="output-show-guides">
        <label for="output-show-guides">Show Guides</label>
      </div>
      <div id="outputs">
        <h3>
          Output images
          <div id="zip-button"></div>
        </h3>
      </div>
      <div id="footer">
        <p>See the source at the <a href="http://code.google.com/p/android-ui-utils">android-ui-utils</a> Google Code project.</p>
      </div>
    </div>

    <script>
      $(studio.checkBrowser);
      $('#output-show-guides').button().click(regenerate);

      var zipper = studio.zip.createDownloadifyZipButton($('#zip-button'));

      // Create image output slots
      for (var density in {'hdpi':1, 'mdpi':1, 'ldpi':1, 'web':1})
        studio.ui.createImageOutputSlot({
          container: $('#outputs').get(0),
          id: 'out-icon-' + density,
          label: (density == 'web') ? ('web, hi-res') : ('drawable-' + density)
        });

      // Load image resources (stencils)
      var resList = {};
      for (var density in {'hdpi':1, 'mdpi':1, 'ldpi':1, 'web':1})
        for (var shape in {'square':1, 'circle':1})
          for (var type in {'back':1, 'fore1':1, 'fore2':1, 'mask':1})
            resList[shape + '-' + density + '-' + type] = (
              'res/launcher-stencil/' + shape + '/' + density + '/' + type + '.png');

      var IMAGE_RESOURCES = {};
      imagelib.loadImageResources(resList, function(r) {
        IMAGE_RESOURCES = r;
        regenerate();
      });

      var PARAM_RESOURCES = {
        'web-iconSize': { w: 512, h: 512 },
        'hdpi-iconSize': { w: 72, h: 72 },
        'mdpi-iconSize': { w: 48, h: 48 },
        'ldpi-iconSize': { w: 36, h: 36 },
        'square-web-targetRect': { x: 57, y: 57, w: 398, h: 398 },
        'circle-web-targetRect': { x: 43, y: 43, w: 426, h: 426 },
        'square-hdpi-targetRect': { x: 8, y: 8, w: 56, h: 56 },
        'circle-hdpi-targetRect': { x: 6, y: 6, w: 60, h: 60 },
        'square-mdpi-targetRect': { x: 5, y: 5, w: 38, h: 38 },
        'circle-mdpi-targetRect': { x: 4, y: 4, w: 40, h: 40 },
        'square-ldpi-targetRect': { x: 4, y: 4, w: 28, h: 28 },
        'circle-ldpi-targetRect': { x: 3, y: 3, w: 30, h: 30 }
      };

      /**
       * Main image generation routine.
       */
      function regenerate() {
        var values = form.getValues();
        var showGuides = $('#output-show-guides').is(':checked');

        var iconName = 'ic_launcher';
        zipper.clear();
        zipper.setZipFilename(iconName + '.zip');

        var continue_ = function(foreImg) {
          var shape = values['shape'];
          for (var density in {'hdpi':1, 'mdpi':1, 'ldpi':1, 'web':1}) {
            var iconSize = PARAM_RESOURCES[density + '-iconSize'];
            var targetRect = PARAM_RESOURCES[shape + '-' + density + '-targetRect'];

            var outCtx = imagelib.drawing.context(iconSize);
            var tmpCtx = imagelib.drawing.context(iconSize);

            tmpCtx.save();
            tmpCtx.globalCompositeOperation = 'source-over';
            imagelib.drawing.copy(tmpCtx, IMAGE_RESOURCES[shape + '-' + density + '-mask'], iconSize);
            tmpCtx.globalCompositeOperation = 'source-atop';
            tmpCtx.fillStyle = values['backColor'].color;
            tmpCtx.fillRect(0, 0, iconSize.w, iconSize.h);
            if (foreImg) {
              var copyFrom = foreImg;
              var foreSize = {
                w: foreImg.naturalWidth,
                h: foreImg.naturalHeight
              };

              if (values['foreColor'].alpha) {
                var tmpCtx2 = imagelib.drawing.context(foreSize);
                imagelib.drawing.copy(tmpCtx2, foreImg, foreSize);
                tmpCtx2.globalCompositeOperation = 'source-atop';
                tmpCtx2.fillStyle = values['foreColor'].color;
                tmpCtx2.fillRect(0, 0, foreSize.w, foreSize.h);
                copyFrom = tmpCtx2;

                /*
                if (density == 'web') {
                  var tmpCtx3 = imagelib.drawing.context(foreSize);
                  imagelib.drawing.fx([
                    {
                      effect: 'outer-shadow',
                      color: '#fff',
                      opacity: 0.30,
                      translate: { y: 5 }
                    },
                    {
                      effect: 'outer-shadow',
                      color: '#000',
                      opacity: 0.15,
                      translate: { y: -5 }
                    }
                  ], tmpCtx3, tmpCtx2, foreSize);
                  copyFrom = tmpCtx3;
                }
                */

                tmpCtx.globalAlpha = values['foreColor'].alpha / 100;
              }

              imagelib.drawing[values['crop'] ? 'drawCenterCrop' : 'drawCenterInside']
                (tmpCtx, copyFrom, targetRect, {
                  x: 0, y: 0,
                  w: foreSize.w, h: foreSize.h
                });
            }
            tmpCtx.restore();

            var foreEffect = values['foreEffect'];
            imagelib.drawing.copy(outCtx, IMAGE_RESOURCES[shape + '-' + density + '-back'], iconSize);
            imagelib.drawing.copy(outCtx, tmpCtx, iconSize);
            imagelib.drawing.copy(outCtx, IMAGE_RESOURCES[shape + '-' + density + '-fore' + foreEffect], iconSize);

            zipper.add({
              name: (density == 'web') ?
                  ('web_hires_512.png') :
                  ('res/drawable-' + density + '/ic_launcher.png'),
              base64data: outCtx.canvas.toDataURL().match(/;base64,(.+)/)[1]
            });

            if (showGuides)
              studio.ui.drawImageGuideRects(outCtx, iconSize, [
                targetRect
              ]);

            imagelib.loadFromUri(outCtx.canvas.toDataURL(), function(density) {
              return function(img) {
                $('#out-icon-' + density).attr('src', img.src);
              };
            }(density));
          }
        };

        if (values['foreground'].uri) {
          imagelib.loadFromUri(values['foreground'].uri, function(foreImg) {
            continue_(foreImg);
          });
        } else {
          continue_(null);
        }
      }

      var form = new studio.forms.Form('icon-form', {
        onChange: regenerate,
        fields: [
          new studio.forms.ImageField('foreground', {
            title: 'Foreground',
            defaultValueTrim: 1
          }),
          new studio.forms.BooleanField('crop', {
            title: 'Foreground scaling',
            defaultValue: true,
            offText: 'Center',
            onText: 'Crop'
          }),
          new studio.forms.EnumField('shape', {
            title: 'Shape',
            buttons: true,
            options: [
              { id: 'square', title: 'Square' },
              { id: 'circle', title: 'Circle' }
            ],
            defaultValue: 'square'
          }),
          new studio.forms.ColorField('backColor', {
            title: 'Background color',
            defaultValue: '#ff0000'
          }),
          new studio.forms.ColorField('foreColor', {
            title: 'Foreground color',
            helpText: 'Only for alpha-transparent foregrounds',
            defaultValue: '#000000',
            alpha: true,
            defaultAlpha: 0
          }),
          new studio.forms.EnumField('foreEffect', {
            title: 'Foreground effects',
            buttons: true,
            options: [
              { id: '1', title: 'Simple' },
              { id: '2', title: 'Fancy' }
            ],
            defaultValue: '1'
          })
        ]
      });
      form.createUI($('#inputs-form').get(0));
    </script>
  </body>
</html>
